<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { getCategoryList } from '@/api/record'
const route = useRoute();
const router = useRouter()
const mapList = ref([
  {
    id: 1,
    name: "该分类下目前还没有舆图",
    image: "https://web-sky-take-out-lihan.oss-cn-beijing.aliyuncs.com/551c14ff-810e-4002-b272-9d338ef64b6d.jpg",
    comment: "该分类下目前还没有舆图"
  }

])

onMounted(async () => {

  const res = await getCategoryList(route.query.id,route.query.recordId)
  mapList.value = res.data.data
  console.log(res.data.data)
  console.log(mapList.value)

});
const isShowComment = ref(false)
const indexRef = ref(0)
const showComment = (index) => {

  isShowComment.value = true
  indexRef.value = index

}
const goBack = () => {
  router.go(-1)
}

</script>

<template>
  <div class="container">
    <el-button v-show="!isShowComment" @click="goBack" class="goBackBtn" type="primary">
      <el-icon class="el-icon--right">
        <ArrowLeftBold />
      </el-icon> 返回
    </el-button>
    <div v-show="!isShowComment" class="mapBox">
      <div class="title">舆图展示</div>
      <div class="mapItemBox">
        <div class="mapItem" v-for="(item, index) in mapList" :key="index">
          <img :src="item.image" @click="showComment(index)" class="mapImg">
          <span class="mapName">{{ item.name }}</span>
          <div class="shadowBox" @click="showComment(index)">
          </div>
        </div>
      </div>
    </div>

    <div v-show="isShowComment" class="commentBox">
      <el-icon class="close" @click="isShowComment = false">
        <Close />
      </el-icon>
      <div class="img-comment-box">
        <img :src="mapList[indexRef].image" class="map">
        <div class="comment">{{ mapList[indexRef].comment }} </div>
        <el-icon class="next" @click="indexRef = indexRef >= mapList.length - 1 ? mapList.length - 1 : indexRef + 1">
          <ArrowRight />
        </el-icon>

        <el-icon class="prev" @click="indexRef = indexRef <= 0 ? 0 : indexRef - 1">
          <ArrowLeft />
        </el-icon>
      </div>

    </div>
  </div>

</template>

<style scoped lang="scss">
.container {
  width: 100vw;
  min-height: 100vh;
  background-image: url('@/assets/layout/图片3.png');
}

// 舆图展示的盒子
.goBackBtn {
  width: 40px;
  height: 20px;
  font-size: 10px;
  margin-top: 10px;
  margin-left: 10px;
  padding: 0;
  padding-right: 10px;
}

.mapBox {
  margin: 0px auto;
  width: 80%;
  height: auto;

  .title {
    margin: 7px 0px;
    font-size: 10px;
    font-weight: 800;
  }

  .mapItemBox {
    display: flex;
    flex-wrap: wrap;


    .mapItem {
      margin-right: 10px;
      width: calc(20% - 10px);
      background-color: white;
      height: 120px;
      border-radius: 3px;
      margin-bottom: 25px;
      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
      position: relative;

      img {
        display: block;
        border-radius: 3px;
        width: 100%;
        height: 70%;
        cursor: pointer;
      }

      .shadowBox {
        position: absolute;
        top: 0px;
        width: 100%;
        height: 35%;
        z-index: 999;
        cursor: pointer;
        transform: translateY(100%);
        background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
      }

      .mapName {
        display: block;
        margin: 10px 5px;
        font-size: 10px;
        font-weight: 900;

      }
    }
  }




}

// 展示评论的盒子
.commentBox {
  width: 100vw;
  /* 占据整个视口宽度 */
  height: 100vh;
  /* 占据整个视口高度 */
  background-color: #3f3f3f;
  padding-top: 50px;
  position: relative;

  // 关闭按钮
  .close {
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: whitesmoke;
    position: absolute;
    cursor: pointer;
    right: 2%;
    top: 3%;
    // border: 1px #efefef solid;
  }


  .img-comment-box {
    display: flex;
    position: relative;
    margin: 0px auto;
    width: 90%;
    height: 80%;
    color: whitesmoke;

    // 下一个
    .next {

      font-size: 25px;
      color: whitesmoke;
      position: absolute;
      height: 100%;
      cursor: pointer;
      right: -6%;
    }

    // 上一张图片
    .prev {
      position: absolute;
      color: whitesmoke;
      left: -6%;
      cursor: pointer;
      height: 100vh;
      height: 100%;
      font-size: 25px;
    }

    .map {
      width: 55%;
      height: 100%;
    }

    .comment {
      font-size: 10px;
      padding-top: 10px;
      padding-left: 10px;
      width: 55%;
      height: 100%;
      overflow-y: scroll;
    }
  }
}
</style>